<template>
  <div class="home">
    <!-- title -->
    <van-nav-bar title="星云餐" fixed class="navbar" />
    <!-- 搜索 -->
    <div class="search">
      <van-search
        placeholder="搜索门店"
        shape="round"
        left-icon
        right-icon="search"
        v-model="searchVal"
        show-action
        @search="onSearch"
      >
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </div>
    <!-- 列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="100"
      class="list-item"
    >
      <div class="data">
        <div
          class="item"
          v-for="(item,index) in data"
          :key="index"
          @click="goSelectType(item.shopId,item.shopName)"
        >
          <div class="left">
            <img src="../assets/images/ada.jpg" />
          </div>
          <div class="right">
            <div class="top">{{item.shopName}}</div>
            <div class="bottom">
              <span>自提</span>
              <span>堂食</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      searchVal: "",
      // 列表
      data: [],
      loading: false,
      finished: false,
      // 分页
      start: 1,
      limit: 3
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    // 搜索
    onSearch() {
      let that = this;
      if (that.searchVal != "") {
        let url = "uc/api/v1/shop/reserveShopList";
        let param = {
          shopName: that.searchVal,
          supplierId: this.$store.state.common.supplierId,
          sortType: 1, //排序类型 1：综合排序 2：销量排序
          start: 1,
          limit: 100000
        };
        that.$ajax.post(url, that.qs.stringify(param)).then(res => {
          if (res.status == 200) {
            that.data = res.data.list;
            that.finished = true;
            that.loading = false;
          }
        });
      } else {
        // 刷新页面
        this.$router.go(0);
      }
    },
    // 触底
    onLoad() {
      let that = this;
      let url = "uc/api/v1/shop/reserveShopList";
      let param = {
        shopName: that.searchVal,
        supplierId: this.$store.state.common.supplierId,
        sortType: 1, //排序类型 1：综合排序 2：销量排序
        start: that.start,
        limit: that.limit
      };
      that.$ajax.post(url, that.qs.stringify(param)).then(res => {
        if (res.status == 200) {
          if (res.data.list.length > 0) {
            that.start += 1;
            that.data = that.data.concat(res.data.list);
          } else {
            that.finished = true;
          }
          that.loading = false;
        }
      });
    },
    goSelectType(shopId, shopName) {
      let that = this;
      // this.$router.push({ path: `/reserve/${shopId}/${shopName}` });
      this.$router.push({
        path: "/reserve",
        query: {
          shopId: shopId,
          shopName: shopName
        }
      });
    }
  }
};
</script>

<style scoped>
.navbar {
  border-bottom: 1px solid #cdcdcd;
}
.search {
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
  padding-top: 180px;
}
.van-search__content {
  border: 1px solid #cdcdcd;
  background-color: #fff;
}
/* 列表 */
.list-item {
  padding-bottom: 200px;
}
.data {
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  margin-top: 50px;
}
.data .item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 30px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #cdcdcd;
}
.data .item .left {
  width: 300px;
  height: 300px;
  margin-right: 40px;
}
.data .item .left img {
  width: 100%;
  height: 100%;
}
.data .item .right .top {
  font-size: 32px;
}
.data .item .right .bottom {
  font-size: 28px;
  margin-top: 30px;
}
.data .item .right .bottom span {
  padding: 10px 10px;
  box-sizing: border-box;
  border: 1px solid #cdcdcd;
  border-radius: 20px;
  margin-right: 20px;
}
</style>